<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>联机井字棋</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
        
        :root {
            --grid-gap: 3vw;
            --border-radius: 15px;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            padding: 2vw;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }

        .game-container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            padding: 8vw 8vw 6vw; /* 顶部内边距大于底部，使内容上移 */
            width: 90vw;
            max-width: 600px;
            transition: transform 0.3s ease;
            text-align: center;
        }
        .game-container:hover {
            transform: translateY(-8px);
        }

        .board {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: var(--grid-gap);
            margin: 3vw auto 8vw; /* 上间距小于下间距，棋盘上移 */
        }

        .cell {
            aspect-ratio: 1/1;
            background: #f8f9fa;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: calc(12vw);
            font-weight: bold;
            cursor: pointer;
            border-radius: var(--grid-gap);
            transition: all 0.3s ease;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
        }
        .cell:hover:not(.occupied) {
            background: #e9ecef;
            transform: scale(1.08);
        }
        .cell.occupied {
            cursor: not-allowed;
        }
        .cell.x {
            color: #c42448;
        }
        .cell.o {
            color: #3264c4;
        }

        .status {
            font-size: 5vw;
            font-weight: 500;
            color: #2a3b4c;
            margin: 2vw 0 0vw; /* 上间距小于下间距，状态框上移 */
            padding: 3vw 4vw;
            background: #f1f3f5;
            border-radius: 10px;
            display: inline-block;
        }

        button {
            padding: 4vw 8vw;
            background: #4a90e2;
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 4vw;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(74, 144, 226, 0.35);
        }
        button:hover {
            background: #357abd;
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(74, 144, 226, 0.45);
        }

        .cell.winner {
            animation: pulse 1.8s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.7); }
            70% { transform: scale(1.05); box-shadow: 0 0 0 calc(var(--grid-gap) * 0.8) rgba(74, 144, 226, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 144, 226, 0); }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h2 style="font-size: 6vw; margin-bottom: 3vw; color: #2a3b4c;">联机井字棋</h2>
        <div class="status" id="status"></div>
        <div class="board" id="board">
            <div class="cell" data-index="0"></div>
            <div class="cell" data-index="1"></div>
            <div class="cell" data-index="2"></div>
            <div class="cell" data-index="3"></div>
            <div class="cell" data-index="4"></div>
            <div class="cell" data-index="5"></div>
            <div class="cell" data-index="6"></div>
            <div class="cell" data-index="7"></div>
            <div class="cell" data-index="8"></div>
        </div>
        <button id="reset">重新开始</button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const board = document.getElementById('board');
            const cells = document.querySelectorAll('.cell');
            const status = document.getElementById('status');
            const resetButton = document.getElementById('reset');
            
            let gameActive, currentPlayer, playerRole, computerRole, gameState;
            const winPatterns = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
            
            function initGame() {
                gameActive = true;
                gameState = Array(9).fill('');
                playerRole = Math.random() < 0.5 ? 'X' : 'O';
                computerRole = playerRole === 'X' ? 'O' : 'X';
                currentPlayer = 'X';
                
                cells.forEach(cell => {
                    cell.textContent = '';
                    cell.classList.remove('x', 'o', 'winner', 'occupied');
                    cell.addEventListener('click', handleClick);
                });
                
                status.textContent = `你是 ${playerRole} - ${currentPlayer === playerRole ? '你的回合' : '对手思考中...'}`;
                
                if(currentPlayer === computerRole) setTimeout(computerMove, Math.random() * 1000 + 500);
            }
            
            function handleClick(e) {
                const cell = e.target;
                const index = +cell.dataset.index;
                
                if(!gameActive || gameState[index] || currentPlayer !== playerRole) return;
                
                makeMove(cell, index);
                if(gameActive && currentPlayer === computerRole) 
                    setTimeout(computerMove, Math.random() * 800 + 300);
            }
            
            function makeMove(cell, index) {
                gameState[index] = currentPlayer;
                cell.textContent = currentPlayer;
                cell.classList.add(currentPlayer.toLowerCase(), 'occupied');
                
                if(checkWin()) {
                    winPatterns.forEach(pattern => {
                        if(pattern.every(i => gameState[i] === currentPlayer)) {
                            pattern.forEach(i => cells[i].classList.add('winner'));
                        }
                    });
                    status.textContent = `${currentPlayer === playerRole ? '你赢了!' : '对手赢了!'}`;
                    return gameActive = false;
                }
                
                if(!gameState.includes('')) {
                    status.textContent = '平局!';
                    return gameActive = false;
                }
                
                currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
                status.textContent = `你是 ${playerRole} - ${currentPlayer === playerRole ? '你的回合' : '对手思考中...'}`;
            }
            function computerMove() {
                if(!gameActive || currentPlayer !== computerRole) return;
        
                const winMove = findMove(computerRole);
                const blockMove = findMove(playerRole);
                const center = gameState[4] === '' ? 4 : null;
        
                // 1. 优先处理赢/阻止/中心
                if (winMove !== undefined) {
                    makeMove(cells[winMove], winMove);
                    return;
                }
                if (blockMove !== undefined) {
                    makeMove(cells[blockMove], blockMove);
                    return;
                }
                if (center !== null) {
                    makeMove(cells[center], center);
                    return;
                }
        
                // 2. 处理角落和其他位置的概率选择
                const corners = [0, 2, 6, 8].filter(i => gameState[i] === ''); // 四个角落
                const otherCells = gameState.map((val, i) => val === '' && !corners.includes(i) ? i : null).filter(i => i !== null);
        
                // 角落选择概率为其他位置的？倍
                const weightedOptions = [...corners, ...corners, ...corners, ...corners, ...corners, ...corners, ...otherCells];
                if (weightedOptions.length === 0) return;

                const randomIndex = Math.floor(Math.random() * weightedOptions.length);
                const move = weightedOptions[randomIndex];
                makeMove(cells[move], move);
            }
            
            function findMove(player) {
                return winPatterns.find(p => 
                    gameState[p[0]] === player && gameState[p[1]] === player && gameState[p[2]] === ''
                )?.[2] ?? winPatterns.find(p => 
                    gameState[p[0]] === player && gameState[p[2]] === player && gameState[p[1]] === ''
                )?.[1] ?? winPatterns.find(p => 
                    gameState[p[1]] === player && gameState[p[2]] === player && gameState[p[0]] === ''
                )?.[0];
            }
            
            function checkWin() {
                return winPatterns.some(p => 
                    gameState[p[0]] && gameState[p[0]] === gameState[p[1]] && gameState[p[1]] === gameState[p[2]]
                );
            }
            
            cells.forEach(cell => cell.addEventListener('click', handleClick));
            resetButton.addEventListener('click', initGame);
            
            initGame();
        });
    </script>
</body>
</html>